<template>
	<!-- Modal container, shown conditionally -->
	<view class="modal-overlay" :class="{'modal-block':isModalVisible}" @click="Cancel">
		<view class="login" :class="{'login-block':isModalVisible}">
			<view class="login-box">


				<view class="log-tit">
					<view class="">
						<u-icon color="#fff" size="32" name="close"></u-icon>
					</view>
					<view class="login-title">提示</view>
					<view class="">
						<u-icon color='#808080' size="32" name="close" @click="Cancel"></u-icon>
					</view>
				</view>
				<view class="login-text">您的问题已提交成功，客服将尽快为您处理</view>
				<view class="btn-box">

					<view class="btn" @click="Cancel">
						<view>确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import {
		listByIds,
		logout,
		getPhone,
		wxlogin
	} from '@/service/api.js';
	export default {
		data() {
			return {
				isModalVisible: false, // Controls modal visibility
			}
		},
		props: {
			Visible: {
				type: Boolean,
				required: false,
			}
		},
		watch: {
			Visible(newTitle) {
				console.log(newTitle, "99999999")
				this.isModalVisible = newTitle
			},
		},
		methods: {
			// Show the modal
			showModal() {
				this.isModalVisible = true;
			},
			// Hide the modal
			Cancel() {
				this.isModalVisible = false;
				this.$emit('isModal', this.isModalVisible)
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	.log-tit {
		display: flex;
		justify-content: space-between;
	}

	/* Modal overlay background */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		opacity: 0;
		/* Start invisible */
		pointer-events: none;
		/* Avoid clicks when not visible */
		transition: opacity 0.3s ease-in-out;
		/* Fade effect for background */
	}

	/* When modal is visible, apply opacity */
	.modal-block {
		opacity: 1;
		/* Fade in */
		pointer-events: auto;
		/* Enable clicking */
	}

	.login-box {
		padding: 32rpx;
	}

	/* Modal content */
	.login {
		text-align: center;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		width: 80%;
		max-width: 400px;
		opacity: 0;
		/* Start invisible */
		transform: translateY(-10rpx);
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}

	/* When modal content is visible, apply opacity */
	.login-block {
		transform: translateY(0);
		opacity: 1;
	}

	.login-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.login-text {
		font-size: 24rpx;
		color: #4D4D4D;
		margin: 40rpx 0;
	}

	/* Button styling */
	.btn-box {
		display: flex;
		justify-content: space-between;
	}


	.btn {
		margin: auto;
		width: 540rpx;
		height: 72rpx;
		background: #CCA566;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		color: #fff;
		line-height: 72rpx;
		text-align: center;

		view {
			color: #fff;
		}
	}
</style>